<template>
  <div>
    <div>
      <!-- 新增按钮 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item class="btn">
          <el-button
            type="primary"
            @click="dialogFormVisible = true"
            class="add"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" border style="width: 100%" class="table">
        <el-table-column
          type="index"
          width="100px"
          label="序号"
        ></el-table-column>
        <el-table-column prop="userName" label="姓名" width="100px">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="150px">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="200px">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="230px">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="200px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="openUpdateUser(scope.row)"
              >修改信息</el-button
            >
            <el-button type="danger" @click="delUser(scope.row)"
              >删除记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        page-size="5"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新增弹框 -->
    <div>
      <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
        <el-form
          :model="userAddBody"
          ref="userAddRef"
          label-width="80px"
          class="demo-dynamic"
        >
          <el-form-item
            prop="userName"
            label="注册账号"
            :rules="[
              { required: true, message: '请输入新用户账号', trigger: 'blur' },
            ]"
          >
            <el-input v-model="userAddBody.userName"></el-input>
          </el-form-item>
          <el-form-item
            prop="sex"
            label="性别"
            :rules="[
              { required: true, message: '请输入新用户性别', trigger: 'blur' },
            ]"
          >
            <el-input v-model="userAddBody.sex"></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            label="注册密码"
            :rules="[
              { required: true, message: '请输入新账号密码', trigger: 'blur' },
            ]"
          >
            <el-input v-model="userAddBody.password"></el-input>
          </el-form-item>
          <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
              { required: true, message: '请输入新用户邮箱', trigger: 'blur' },
            ]"
          >
            <el-input v-model="userAddBody.email"></el-input>
          </el-form-item>
          <el-form-item
            prop="phone"
            label="电话"
            :rules="[
              { required: true, message: '请输入新用户电话', trigger: 'blur' },
            ]"
          >
            <el-input v-model="userAddBody.phone"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <!-- 修改学生 -->
      <el-dialog title="修改信息" :visible.sync="updateDialogFormVisible">
        <el-form
          :model="updateObj"
          ref="userUpdateRef"
          label-width="80px"
          class="demo-dynamic"
        >
          <el-form-item
            prop="userName"
            label="修改账号"
            :rules="[
              { required: true, message: '请输入账号', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.userName"></el-input>
          </el-form-item>
          <el-form-item
            prop="sex"
            label="修改性别"
            :rules="[
              { required: true, message: '请输入性别', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.sex"></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            label="修改密码"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.password"></el-input>
          </el-form-item>
          <el-form-item
            prop="email"
            label="修改邮箱"
            :rules="[
              { required: true, message: '请输入邮箱', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.email"></el-input>
          </el-form-item>
          <el-form-item
            prop="phone"
            label="修改电话"
            :rules="[
              { required: true, message: '请输入电话', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.phone"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { pageList, insertUser, deleteUser, updateUser } from "@/api/user-api";

export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      userAddBody: {
        userName: "",
        sex: "",
        password: "",
        email: "",
        phone: "",
      },
      total: 0,
      searchBody: {
        pageNum: 1,
        pageSize: 5,
      },
      updateDialogFormVisible: false,
      updateObj: {},
    };
  },
  methods: {
    getUserList() {
      pageList({ pageNum: 1, pageSize: 10 }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    addUser() {
      insertUser(this.userAddBody).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.getUserList();
        } else {
          this.$alert(res.data.msg, "添加失败", {
            confirmButtonText: "确定",
          });
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      pageList(this.searchBody, val, this.searchBody.pageSize).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
        }
      });
    },
    delUser(row) {
      // console.log(index, row);
      this.$confirm("是否删除此条学生信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(row.userId).then((res) => {
            // console.log(res);
            if (res.data.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              // 重新加载列表
              this.searchBody.pageNum = 1;
              this.getUserList();
            } else {
              this.$alert(res.data.msg, "删除失败", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch(() => {});
    },
    openUpdateUser(user) {
      this.updateObj = user;
      this.updateDialogFormVisible = true;
    },
    updateUser() {
      // 获取用户输入
      this.$refs.userUpdateRef
        .validate()
        .then(() => {
          // 代表表单校验通过了，可以发送请求了
          updateUser(this.updateObj).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.updateDialogFormVisible = false;
              this.getUserList();
            } else {
              this.$alert(res.data.msg, "失败", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch((err) => {
          // 校验失败，不能应该给用户提示
          console.log(err);
        });
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>

<style>
.add {
  margin-top: 20px;
  margin-left: 10px;
}
.page {
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>